<template>
  <div class="app-container">
    <list-page-container>
      <template slot="query">
        <el-alert
            title="在确认导入数据无误后请点击“确定”按钮进行数据导入"
            type="success"
            :closable="false">
        </el-alert>
      </template>
      <template slot="table">
        <el-tabs v-model="activeName">
          <el-tab-pane v-for="(dataItem,dataIndex) in listData" :key="dataIndex" :label="dataItem.tbdh"
                       :name="`${dataIndex}`">
            <div class="import-txt">
              <div class="label-value-con">
                <div class="label">是否允许导入：</div>
                <div class="value">
                  <span class="allow" v-if="dataItem.allowImport">允许导入</span>
                  <span class="notAllow" v-if="!dataItem.allowImport">不允许导入</span>
                </div>
              </div>
              <div class="label-value-con">
                <div class="label">导入备注：</div>
                <div class="value">{{ dataItem.importRemark == null ? '暂无' : dataItem.importRemark }}</div>
              </div>
            </div>
            <div class="table-con">
              <el-table height="100%" :data="dataItem.items">
                <el-table-column label="投保人" align="center" prop="tbr"/>
                <el-table-column label="投保人身份证" align="center" prop="sfz"/>
                <el-table-column label="地块序号" align="center" prop="dkxh"/>
                <el-table-column label="地块名称" align="center" prop="dkmc"/>
                <el-table-column label="受灾生育期代码" align="center" prop="szsyq"/>
                <el-table-column label="受灾生育期名称" align="center" prop="szsyqName"/>
                <el-table-column label="绝收面积" align="center" prop="jsmj"/>
                <el-table-column label="单位面积平均损失产量" align="center" prop="pjss"/>
                <el-table-column label="单位面积标准产量" align="center" prop="bzcl"/>
                <el-table-column label="成灾面积" align="center" prop="czmj"/>
                <el-table-column label="灾害类型" align="center" prop="zhlxName"/>
                <el-table-column label="单位保费" align="center" prop="dwbf"/>
                <el-table-column label="理赔金额" align="center" prop="lpje"/>

                <el-table-column label="灾害等级" align="center" prop="zhdj"/>
                <el-table-column label="保险理赔面积" align="center" prop="bxlpmj"/>

                <el-table-column label="是否允许导入" align="center" prop="orderTypeName">
                  <template slot-scope="scope">
                    <span class="allow" v-if="scope.row.allowImport">允许导入</span>
                    <span class="notAllow" v-if="!scope.row.allowImport">不允许导入</span>
                  </template>
                </el-table-column>
                <el-table-column label="导入备注" align="center" prop="importRemark"/>

              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </template>
      <template slot="pageDisplay">
        <el-button icon="el-icon-refresh" size="mini" @click="cancel">取消</el-button>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="submitData">确认</el-button>
      </template>
    </list-page-container>
  </div>
</template>

<script>
import {
  getClaimSettlementImportData,
  getImportDataDetail,
  importClaimSettlementData,
  importDataDetail
} from "@/api/chit/chitListPage";
import {importDataMixins} from "@/views/chit/importData/importDataMixins";

export default {
  name: "importClaimSettlementData",
  mixins: [importDataMixins],
  data() {
    return {
      getDataListFun: getClaimSettlementImportData,
      importDataFun: importClaimSettlementData,
      activeName: '0'
    }
  },
}
</script>

<style lang="scss" scoped>

</style>
